<template>
	<view class="healthBox">
		<image class="background" src="../../static/img/backgroundImage@2x.png"></image>
		<view class="mainContent">
			<navigator :url="item.name == '记饮食' ?'./rememberEatimg.html?type=add' : './record.html?id='+item.id" v-for="(item,index) in topList" :key="index">
				<image :src="
					item.name == '记体重'?'../../static/img/weight@2x.png':
					item.name == '记血压'?'../../static/img/bloodPressure@2x.png':
					item.name == '记血糖'?'../../static/img/bloodGlucose@2x.png':
					item.name == '记尿酸'?'../../static/img/purineTrione@2x.png':
					item.name == '记心率'?'../../static/img/heartRate@2x.png':
					item.name == '记睡眠'?'../../static/img/sleep@2x.png':
					item.name == '记运动'?'../../static/img/exercise@2x.png':'../../static/img/diet@2x.png'
				" alt="">
				<p>{{item.name}}</p>
			</navigator>
		</view>
		<view class="dataBoard">
			<p class="monitoringData">监测数据板<span>(最近一次数据)</span></p>
			<view class="template">
				<navigator :href="tzData && tzData.parent ?'./information.html?id='+tzData.parent : 'javascript:;'" class="weight">
					<p class="weight_background">体重值</p>
					<view class="details">
						<p class="data">
							<image src="../../static/img/dataIcon@2x.png" alt="">
							<span>{{tzData.createdDate || 0}}</span>
						</p>
						<p class="weight_value1">
							<span>{{tzData.weight || 0}}</span>
							<span>KG</span>
						</p>
						<p class="weight_value2">
							<span>{{tzData.weight ? (tzData.weight / Math.pow((tzData.height /100),2)).toFixed(2) : 0}}</span>
							<span>BMI</span>
						</p>
					</view>
				</navigator>
				<navigator :href="xyData && xyData.parent ? './Data.html?id='+xyData.parent : 'javascript:;'" class="weight">
					<p class="weight_background bloodPressureValue">血压值</p>
					<view class="details">
						<p class="data">
							<image src="../../static/img/dataIcon@2x.png" alt="">
							<span>{{xyData.createdDate || 0}}</span>
						</p>
						<p class="weight_value1">
							<span>{{xyData.systolicpressure || 0}}</span>
							<span>mmHg</span>
						</p>
						<p class="weight_value2">
							<span>{{xyData.diastolicpressure || 0}}</span>
							<span>mmHg</span>
						</p>
					</view>
				</navigator>
				<navigator :href="xtData && xtData.parent ?'./Data.html?id='+xtData.parent : 'javascript:;'" class="weight">
					<p class="weight_background bloodGlucoseValue">血糖值</p>
					<view class="details">
						<p class="data">
							<image src="../../static/img/dataIcon@2x.png" alt="">
							<span>{{xtData.createdDate || 0}}</span>
						</p>
						<p class="weight_value1">
							<span>{{xtData.bloodtime || 0}}</span>
							<span>{{xtData.bloodmedication || 0}}</span>
						</p>
						<p class="weight_value2">
							<span>{{xtData.bloodglucose || 0}}</span>
							<span>mmol/L</span>
						</p>
					</view>
				</navigator>
			</view>

			<view class="template">
				<navigator :href="xlData && xlData.parent ? './Data.html?id='+xlData.parent : 'javascript:;'" class="weight">
					<p class="weight_background heartRateValue">心率值</p>
					<view class="details">
						<p class="data">
							<image src="../../static/img/dataIcon@2x.png" alt="">
							<span>{{xlData.createdDate || 0}}</span>
						</p>
						<p class="weight_value1">
							<span>{{xlData.toDay || 0}}</span>
							<span>次/每分钟</span>
						</p>
						<p class="weight_value2" v-if="typeof(xlData.average) == 'number'">
							<span>7次平均</span>
							<span>{{xlData.average || 0}}</span>
						</p>
						<p class="weight_value2" v-else>
							<span>{{xlData.average ? xlData.average.split('  ')[0] : 0}}</span>
							<span>{{xlData.average ? xlData.average.split('  ')[1] : 0}}</span>
						</p>
					</view>
				</navigator>
				<navigator :href="smData && smData.parent ? './Data.html?id='+smData.parent : 'javascript:;'" class="weight">
					<p class="weight_background sleepValue">睡眠值</p>
					<view class="details">
						<p class="data">
							<image src="../../static/img/dataIcon@2x.png" alt="">
							<span>{{smData.createdDate || 0}}</span>
						</p>
						<p class="weight_value1">
							<span>{{smData.toDay ? smData.toDay.split(' ')[0] : 0}}</span>
							<span>{{smData.toDay ? smData.toDay.split(' ')[1] : 0}}</span>
						</p>
						<p class="weight_value2">
							<span>{{smData.average ? smData.average.split(' ')[0] : 0}}</span>
							<span>{{smData.average ? smData.average.split(' ')[1] : 0}}</span>
						</p>
					</view>
				</navigator>
				<navigator :href="nsData && nsData.parent ?'./Data.html?id='+nsData.parent : 'javascript:;'" class="weight">
					<p class="weight_background purineTrioneValue">尿酸值</p>
					<view class="details">
						<p class="data">
							<image src="../../static/img/dataIcon@2x.png" alt="">
							<span>{{nsData.createdDate || 0}}</span>
						</p>
						<p class="weight_value1">
							<span>{{nsData.toDay || 0}}</span>
							<span>μmol/L</span>
						</p>
						<p class="weight_value2" v-if="typeof(nsData.average) == 'number'">
							<span>7次平均</span>
							<span>{{nsData.average || 0}}</span>
						</p>
						<p class="weight_value2" v-else>
							<span>{{nsData.average ? nsData.average.split('  ')[0] : 0}}</span>
							<span>{{nsData.average ? toDecimal2(nsData.average.split('  ')[1]) : 0}}</span>
						</p>
					</view>
				</navigator>
			</view>
			<view class="template">
				<navigator :href="ydData && ydData.parent ? './Data.html?id='+ydData.parent : 'javascript:;'" class="weight">
					<p class="weight_background bloodPressureValue">运动值</p>
					<view class="details">
						<p class="data">
							<image src="../../static/img/dataIcon@2x.png" alt="">
							<span>{{ydData.createdDate || 0}}</span>
						</p>
						<p class="weight_value2">
							<span style="display: block; width: 100%; margin: 2vw 0 0;">{{ydData.motionTime || 0}}</span>
						</p>
						<p class="weight_value1">
							<span style="display: block; width: 100%;">{{ydData.motiontype || 0}}</span>
						</p>
						
					</view>
				</navigator>
				<navigator :href="ysData && ysData.parent ? './rememberEatimg.html?id='+ysData.parent+'&type=see' : 'javascript:;'" class="weight">
					<p class="weight_background">饮食值</p>
					<view class="details">
						<p class="data">
							<image src="../../static/img/dataIcon@2x.png" alt="">
							 <span>{{ysData.createdDate || 0}}</span>
						</p>
						<p class="weight_value1">
							<span style="display: block;width: 100%;">{{ysData.value || 0}}</span>
						</p>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topList:[],
				tzData:{},
				xyData:{},
				xtData:{},
				xlData:{},
				smData:{},
				nsData:{},
				ydData: {},
				ysData: {}
			}
		},
		onLoad() {
			this.$api.healthMonitorDetail() .then((res) => {
				this.topList = res.data.Result.AppMonitorEntity;
				if(res.data.Result.appMonitorValueEntities && res.data.Result.appMonitorValueEntities.length > 0) {
					res.data.Result.appMonitorValueEntities && res.data.Result.appMonitorValueEntities.map((a)=>{
						a.parameterValues = JSON.parse(a.parameterValues) || []
						if(a.parent == 1){
							a.parameterValues.map((b)=>{
								if(b.name == '身高'){
									a.height = b.value
								}else if(b.name == '体重'){
									a.weight = b.value
								}
							})
							this.tzData = a;
						}else if(a.parent == 2){
							a.parameterValues.map((b)=>{
								if(b.name == '收缩压'){
									a.systolicpressure = b.value
								}else if(b.name == '舒张压'){
									a.diastolicpressure = b.value
								}
							})
							this.xyData = a;
						}else if(a.parent == 3){
							a.parameterValues.map((b)=>{
								if(b.name == '血糖值'){
									a.bloodglucose = b.value
								}else if(b.name == '记录时间'){
									a.bloodtime = b.value
								}else if(b.name == '用药情况'){
									a.bloodmedication = b.value
								}
							})
							this.xtData = a
						}else if(a.parent == 5){
							this.xlData = a
							// console.log(this.xlData)
						}else if(a.parent == 6){
							this.smData = a
						}else if(a.parent == 4){
							this.nsData = a
						}else if(a.parent == 7) {
							a.parameterValues.map((b)=>{
								if(b.name == '运动类型'){
									a.motiontype = b.value
								}else if(b.name == '运动时间'){
									a.motionTime = b.value
								}
							})
							this.ydData = a
						}else if(a.parent == 8) {
							a.parameterValues.createdDate = a.createdDate;
							a.parameterValues.parent = a.parent;
							this.ysData = a.parameterValues
						}
					})
				}
			})
		},
		methods:{
			toDecimal2(x) {
				var f = parseFloat(x);  
				if (isNaN(f)) {  
					return false;  
				}  
				var f = Math.round(x*100)/100;  
				var s = f.toString();  
				var rs = s.indexOf('.');  
				if (rs < 0) {  
					rs = s.length;  
					s += '.';  
				}  
				while (s.length <= rs + 2) {  
					s += '0';  
				}  
				return s;  
			},
		}
	}
</script>

<style lang="scss" scoped>
	.healthBox {
		min-height: 100vh;
		width: 750upx;
	    background: #F8F8F8;
		.background {
		    width: 100%;
		    height: 390upx;   
		}
		.mainContent {
			position: relative;
			width: 702upx;
			margin: -256upx 24upx 0;
			background-color: #fff;
			border-radius: 12upx;
			padding: 46upx 30upx;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
		
			navigator {
				width: 25%;
				text-align: center;
		
				image {
					width: 110upx;
					height: 110upx;
				}
		
				p {
					color: #333333;
					font-size: 28upx;
				}
			}
		
			navigator:nth-child(-n+4) {
				margin-bottom: 50upx;
			}
		}
		/* 监测数据版 */
		.dataBoard {
			margin-top: 43upx;
			.monitoringData {
				color: #333333;
				font-size: 32upx;
				text-align: center;
				span {
					color: #666666;
					font-size: 26upx;
				}
			}
			.template {
				display: flex;
				align-items: center;
				margin:41upx 24upx 0;
				.weight {
					width: 30%;
					margin-right:40upx;
					.weight_background {
						background: url(../../static/img/weightValue@2x.png) no-repeat;
						background-size: 100% 100%;
						color: #fff;
						font-size: 30upx;
						height: 87upx;
						text-align: center;
						line-height: 87upx;
					}
					.details {
						background-color: #fff;
						padding: 28upx 16upx 40upx;
						height: 16.7vw;
						.data {
							display: flex;
							align-items: center;
							image {
								width: 22upx;
								height: 22upx;
								margin-right: 6upx;
							}
							span {
								color: #36AC7D;
								font-size: 26upx;
							}
						}
						.weight_value1,
						.weight_value2{
							color: #333333;
							font-size: 24upx;
							overflow: hidden;
							margin: 14upx auto;
							span:first-child {
								float: left;
							}
							span:last-child {
								float: right;
							}
						}
					}
				}
				.weight:last-child {
				    margin-right: 0;
				}
			}
			.template:last-child {
				padding-bottom: 30upx;
			}
		}
	}
</style>
